<template>
  <div class="member-detail">
    <el-card class="breadcrumb-card">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/member' }">会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员详情</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    
    <el-row :gutter="20">
      <!-- 会员基本信息 -->
      <el-col :span="16">
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span>基本信息</span>
              <el-button type="primary" @click="handleEdit">编辑</el-button>
            </div>
          </template>
          
          <el-descriptions :column="2" border>
            <el-descriptions-item label="会员ID">{{ memberInfo.id }}</el-descriptions-item>
            <el-descriptions-item label="用户ID">{{ memberInfo.userId }}</el-descriptions-item>
            <el-descriptions-item label="用户名">{{ memberInfo.username }}</el-descriptions-item>
            <el-descriptions-item label="会员等级">
              <el-tag :type="getLevelTagType(memberInfo.level)">
                {{ getLevelText(memberInfo.level) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="到期时间">{{ memberInfo.expiryDate }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ memberInfo.createdAt }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ memberInfo.updatedAt }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        
        <!-- 会员消费记录 -->
        <el-card class="record-card">
          <template #header>
            <div class="card-header">
              <span>消费记录</span>
            </div>
          </template>
          
          <el-table :data="consumptionRecords" stripe style="width: 100%">
            <el-table-column prop="id" label="订单ID" width="80" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="amount" label="金额" width="100">
              <template #default="scope">
                ¥{{ scope.row.amount }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getStatusTagType(scope.row.status)">
                  {{ getStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createdAt" label="创建时间" width="180" />
          </el-table>
          
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="consumptionPagination.currentPage"
              v-model:page-size="consumptionPagination.pageSize"
              :page-sizes="[5, 10, 20]"
              :total="consumptionPagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleConsumptionSizeChange"
              @current-change="handleConsumptionCurrentChange"
            />
          </div>
        </el-card>
      </el-col>
      
      <!-- 会员统计信息 -->
      <el-col :span="8">
        <el-card class="stats-card">
          <template #header>
            <div class="card-header">
              <span>统计信息</span>
            </div>
          </template>
          
          <div class="stats-content">
            <div class="stat-item">
              <div class="stat-label">累计消费</div>
              <div class="stat-value">¥{{ statistics.totalConsumption }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">订单数量</div>
              <div class="stat-value">{{ statistics.orderCount }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">活跃天数</div>
              <div class="stat-value">{{ statistics.activeDays }}</div>
            </div>
          </div>
        </el-card>
        
        <!-- 会员等级历史 -->
        <el-card class="history-card">
          <template #header>
            <div class="card-header">
              <span>等级历史</span>
            </div>
          </template>
          
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in levelHistory"
              :key="index"
              :timestamp="item.date"
              placement="top"
            >
              <el-card>
                <h4>{{ getLevelText(item.level) }}</h4>
                <p>{{ item.description }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 编辑会员对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑会员"
      width="500px"
      @close="handleEditDialogClose"
    >
      <el-form
        ref="editFormRef"
        :model="editForm"
        :rules="editFormRules"
        label-width="100px"
      >
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" disabled />
        </el-form-item>
        <el-form-item label="会员等级" prop="level">
          <el-select v-model="editForm.level" placeholder="请选择会员等级">
            <el-option label="普通会员" value="basic" />
            <el-option label="黄金会员" value="gold" />
            <el-option label="钻石会员" value="diamond" />
            <el-option label="VIP会员" value="vip" />
          </el-select>
        </el-form-item>
        <el-form-item label="到期时间" prop="expiryDate">
          <el-date-picker
            v-model="editForm.expiryDate"
            type="date"
            placeholder="请选择到期时间"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveEdit" :loading="saveLoading">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()

// 会员基本信息
const memberInfo = ref({
  id: null,
  userId: null,
  username: '',
  level: '',
  expiryDate: '',
  createdAt: '',
  updatedAt: ''
})

// 消费记录
const consumptionRecords = ref([
  {
    id: 1001,
    productName: 'VIP会员月卡',
    amount: 99.00,
    status: 'completed',
    createdAt: '2023-05-01 10:00:00'
  },
  {
    id: 1002,
    productName: '钻石会员季卡',
    amount: 299.00,
    status: 'completed',
    createdAt: '2023-04-01 14:30:00'
  },
  {
    id: 1003,
    productName: '黄金会员年卡',
    amount: 999.00,
    status: 'completed',
    createdAt: '2023-01-01 12:00:00'
  }
])

// 消费记录分页
const consumptionPagination = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 3
})

// 统计信息
const statistics = ref({
  totalConsumption: 1397.00,
  orderCount: 3,
  activeDays: 180
})

// 等级历史
const levelHistory = ref([
  {
    date: '2023-01-01',
    level: 'gold',
    description: '购买黄金会员'
  },
  {
    date: '2023-04-01',
    level: 'diamond',
    description: '升级为钻石会员'
  },
  {
    date: '2023-05-01',
    level: 'vip',
    description: '升级为VIP会员'
  }
])

// 编辑对话框相关
const editDialogVisible = ref(false)
const saveLoading = ref(false)
const editFormRef = ref()

// 编辑表单
const editForm = reactive({
  id: null,
  userId: null,
  username: '',
  level: '',
  expiryDate: ''
})

// 编辑表单验证规则
const editFormRules = {
  level: [
    { required: true, message: '请选择会员等级', trigger: 'change' }
  ],
  expiryDate: [
    { required: true, message: '请选择到期时间', trigger: 'change' }
  ]
}

// 获取会员等级标签类型
const getLevelTagType = (level) => {
  switch (level) {
    case 'basic':
      return 'info'
    case 'gold':
      return 'warning'
    case 'diamond':
      return 'primary'
    case 'vip':
      return 'success'
    default:
      return 'info'
  }
}

// 获取会员等级文本
const getLevelText = (level) => {
  switch (level) {
    case 'basic':
      return '普通会员'
    case 'gold':
      return '黄金会员'
    case 'diamond':
      return '钻石会员'
    case 'vip':
      return 'VIP会员'
    default:
      return '未知'
  }
}

// 获取订单状态标签类型
const getStatusTagType = (status) => {
  switch (status) {
    case 'pending':
      return 'warning'
    case 'completed':
      return 'success'
    case 'cancelled':
      return 'danger'
    default:
      return 'info'
  }
}

// 获取订单状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'pending':
      return '待支付'
    case 'completed':
      return '已完成'
    case 'cancelled':
      return '已取消'
    default:
      return '未知'
  }
}

// 处理编辑
const handleEdit = () => {
  editDialogVisible.value = true
  // 填充表单数据
  Object.assign(editForm, memberInfo.value)
}

// 处理保存编辑
const handleSaveEdit = () => {
  if (!editFormRef.value) return
  
  editFormRef.value.validate((valid) => {
    if (valid) {
      saveLoading.value = true
      
      // 模拟保存操作
      setTimeout(() => {
        saveLoading.value = false
        editDialogVisible.value = false
        ElMessage.success('更新成功')
        
        // 更新会员信息
        Object.assign(memberInfo.value, editForm)
      }, 1000)
    }
  })
}

// 处理编辑对话框关闭
const handleEditDialogClose = () => {
  if (editFormRef.value) {
    editFormRef.value.resetFields()
  }
}

// 处理消费记录分页大小变化
const handleConsumptionSizeChange = (val) => {
  consumptionPagination.pageSize = val
  // 这里应该重新获取数据
}

// 处理消费记录当前页变化
const handleConsumptionCurrentChange = (val) => {
  consumptionPagination.currentPage = val
  // 这里应该重新获取数据
}

// 获取会员详情
const fetchMemberDetail = (id) => {
  // 模拟API请求
  setTimeout(() => {
    memberInfo.value = {
      id: id,
      userId: id,
      username: `user${id}`,
      level: 'vip',
      expiryDate: '2024-12-31',
      createdAt: '2023-01-01 12:00:00',
      updatedAt: '2023-06-01 15:30:00'
    }
  }, 500)
}

// 组件挂载后获取数据
onMounted(() => {
  // 获取会员详情数据
  const memberId = route.params.id
  if (memberId) {
    fetchMemberDetail(memberId)
  }
})
</script>

<style lang="scss" scoped>
.member-detail {
  .breadcrumb-card {
    margin-bottom: 20px;
  }
  
  .info-card,
  .record-card,
  .stats-card,
  .history-card {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  
  .stats-content {
    .stat-item {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      
      .stat-label {
        font-weight: bold;
      }
      
      .stat-value {
        color: #409eff;
        font-size: 18px;
        font-weight: bold;
      }
    }
    
    .stat-item:last-child {
      border-bottom: none;
    }
  }
  
  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>